<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .account {
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<link rel="stylesheet" href="../../app01/static/bootstrap-3.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<body>

<div id="app">
    <div class="account">
        <h1 class="text-center">注册</h1>
        <form method="post">
            {% csrf_token %}
            {% for field in form %}
                {% if field.label == "验证码" %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="clearfix">
                            <div class="col-md-6" v-model="verify_sms" style="padding-left: 0">{{ field }}</div>
                            <div class="col-md-6">
                                <a @click="get_verify_sms" type="button" class="btn btn-default">[[
                                    send_sms_message ]]</a>
                            </div>
                            <span style="color:red">{{ sms_errmsg }}</span>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div>{{ field }}</div>
                        <span v-show="{{ field.name }}_error" style="color:red">[[ {{ field.name }}_error_msg ]]</span>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="checkbox">
                <label>
                    <input type="checkbox" v-model="is_choice" @blur="check_is_choice"> <a
                        href="#">我已经阅读相关条例</a>
                </label>
                <span v-show="is_choice_error" style="color:red">[[ is_choice_msg ]]</span>
            </div>
            <span style="color:red">{{ err_msg }}</span>
            <button type="submit" class="btn btn-primary">注册</button>
        </form>
    </div>
</div>
</body>
<script src="../../app01/static/js/vue-3.1.2.js"></script>
<script src="../../app01/static/js/axios-0.18.0.min.js"></script>
<script src="../../app01/static/js/register.js"></script>
</html>